<template>
	<div >
		<el-row :gutter="10" style="margin-bottom: 40px;">
			<el-col :span="6">
				<el-card style="color: #409EFF;">
					<div ><i class="el-icon-user-solid"></i>用户总数</div>
					<div style="padding: 10px 0; text-align: center; font-weight: bold;">
						100
					</div>
				</el-card>
			</el-col>
			<el-col :span="6"     >
				<el-card style="color: #F56C6C;">
					<div ><i class="el-icon-money"></i>订单总数</div>
					<div style="padding: 10px 0; text-align: center; font-weight: bold;">
						1000000
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card style="color: #67C23A;">
					<div ><i class="el-icon-bank-card"></i>公告栏总数</div>
					<div style="padding: 10px 0; text-align: center; font-weight: bold;">
						10
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card style="color: #E6A23C;">
					<div ><i class="el-icon-s-shop"></i>商品总数</div>
					<div style="padding: 10px 0; text-align: center; font-weight: bold;">
						10000000
					</div>
				</el-card>
			</el-col>
		</el-row>
		
		<el-row>
			<el-col :span="14">
				<div id="main" style="width: 500px; height: 400px;"></div>
			</el-col>
			<el-col :span="10" style="">
				<div id="pie" style="width: 500px; height: 400px;"></div>
			</el-col>
		</el-row>
	</div>
	

</template>

<script>
	import * as echarts from 'echarts';
	import request from '../../utils/zht/request.js'
	export default {
		name:"Data",
		data() {
			return{
				
						
				
			}
			
			
			
		},
		mounted(){  //页面元素渲染之后再触发
			
			
			var option = {
			  title: {
			    text: '公告栏各季度发布时间统计',
			    subtext: '趋势图',
			    left: 'center'
			  },
			  xAxis: {
			    type: 'category',
			    /* data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
				 */
				 data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
			  },
			  yAxis: {
			    type: 'value'
			  },
			  series: [
			    {
			      data: [],
			      type: 'line'
			    },
				{
				  data: [],
				  type: 'bar'
				}
			  ]
			};

			//饼图
			
			var pieoption= {
			  title: {
			    text: '公告栏各季度发布时间统计',
			    subtext: '趋势图',
			    left: 'center'
			  },
			  tooltip: {
			    trigger: 'item'
			  },
			  legend: {
			    orient: 'vertical',
			    left: 'left'
			  },
			  series: [ 
			    {
			      name: 'Access From',
			      type: 'pie',
			      radius: '50%',
			      data: [],
				  label:{  //饼图图形上的文本标签
					  normal:{
						  show:true,
						  position:'inner',//标签位置
						  textStyle:{
							  fontWeight:300,
							  fontSize:16,
							  color:'#fff'
						  },
						  formatter:'{d}%'  //饼图上显示百分比
					  }
				  },
			      emphasis: {
			        itemStyle: {
			          shadowBlur: 10,
			          shadowOffsetX: 0,
			          shadowColor: 'rgba(0, 0, 0, 0.5)'
			        }
			      }
			    }
			  ]
			};
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			
			var pieDom = document.getElementById('pie');
			var pieChart = echarts.init(pieDom);
			
			request.get("/echarts/pienotice").then(res =>{
		
				pieoption.series[0].data = [
					{ name:"第一季度", value: res.data[0]},
					{ name:"第二季度", value: res.data[1]},
					{ name:"第三季度", value: res.data[2]},
					{ name:"第四季度", value: res.data[3]},

				]
				
				pieChart.setOption(pieoption);
			})
			
			request.get("/echarts/notice").then(res =>{
				
				/* option.xAxis.data = res.data.x 
				 */
				console.log(res.data)
				option.series[0].data = res.data
				option.series[1].data = res.data
				//准备好数据后再set
				myChart.setOption(option);
				
			})
			
			
		}
		

	}
</script>

<style scoped>

</style>